(NaN, NaN) // true Object.is(+0, -0) // false Object.assign(target, source) 将source中的属性和方法混入target对象 允许重发的属性定义,排在最后的为实际值 属性枚举的顺序: 所有数字类型的键按升序排列 所有字符串类型的键按添加进对象的顺序排列 所有符号类型的键也按照添加进对象的顺序排列 可修改对象的原型 : Object.setPrototypeOf(obj, new_prototype) 使用super作为指向原型对象的指针
for...in , Object.keys(), JSON.stringify(), Object.assign(); ES6一共有5种方法可以遍历对象的属性 (1) for let [key,value] of entries(obj)){ console.log([key,value]); // ['a',1],['b',2],['c',3] } 11.对象的扩展运算 对象的结构赋值用于从一个对象取值,相当于将所有可遍历的,但尚未对齐的属性, 分配到指定的对象上面,所有的键和值他们的值,都会拷贝到新对象上面。 let {x,y,...z} = {x:1,y:2,a:3,b:4}; x // 1 y // 2 z // {a:3,b:4} 扩展运算 扩展运算符 用于取出参数对象的多有可遍历属性,拷贝到当前对象之中。
一、属性的简洁表示法 ES6 允许直接写入变量和函数,作为对象的属性和方法 let a=1; let b=2; let es5={a:a,b:b}; // 等同于 let es6={a,b}; 上面代码表明 ,ES6 允许在对象之中,直接写变量。 '); } }; // 等同于 let es6={ sayhello(){ console.log('hello'); } }; 二、属性名表达式 ES6 允许字面量定义对象时 对象的扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中 let z = { a: 3, b: 4 }; let n = { ...z }; n // { a: 3, b: 4 } 由于数组是特殊的对象,所以对象的扩展运算符也可以用于数组 let foo = { ...
一、对象的扩展对象(object)是 JavaScript 最重要的数据结构。ES6 对它进行了重大升级属性的简洁表示法ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。 ES6 允许字面量定义对象时,用方法二(表达式)作为对象的属性名,即把表达式放在方括号内。 对象的扩展运算符《数组的扩展》一章中,已经介绍过扩展运算符(...)。ES2018 将这个运算符引入了对象。 对象的解构赋值用于从一个对象取值,相当于将目标对象自身的所有可遍历的(enumerable)、但尚未被读取的属性,分配到指定的对象上面。所有的键和它们的值,都会拷贝到新对象上面。 ES6 提出“Same-value equality”(同值相等)算法,用来解决这个问题。Object.is就是部署这个算法的新方法。
简写方法ES6中的简写方法允许我们在对象字面量中使用更简洁的语法来定义方法。简写方法省略了冒号和function关键字,只需提供方法名和函数体即可。 简写方法可以更好地提升代码的可读性和可维护性,使对象的方法定义更加简洁和直观。计算属性名方法ES6中的计算属性名方法允许我们使用动态计算的属性名来定义对象的方法。 在运行时,可以根据变量的值来计算方法名,并将方法绑定到对象上。计算属性名方法为我们提供了更大的灵活性,使我们能够根据动态的需求来定义和使用对象的方法。 方法名表达式ES6中的方法名表达式允许我们使用表达式作为对象方法的名称。通过将表达式放在方括号中,我们可以在对象字面量中动态地定义方法名。 在运行时,表达式的值将作为方法名,并将方法绑定到对象上。方法名表达式为我们提供了更大的灵活性,使我们能够根据表达式的值来定义和使用对象的方法。示例让我们通过示例来理解ES6中对象方法扩展的使用。
属性的简洁表示法 ES6允许直接写入变量和函数作为对象的属性和方法。意思就是说允许在对象中只写属性名,不用写属性值。这时,属性值等于属性名称所代表的变量。 属性名表达式 ES6里允许定义对象的时候用表达式作为对象的属性名或者方法名,即把表达式放在方括号里。 属性的遍历 ES6中一共有6中方法可以遍历对象的属性。 对象的扩展运算符 ES7中提案,将rest参数/扩展运算符(…)引入对象。 Rest参数 Rest参数用于从一个对象取值,相当于将所有可遍历尚未被读取的属性,分配到制定的对象上。 简单的demo let {x,y,...k} = {x:2, y:3,z:4,a:5}; x //2 y //3 k //{z:4,a:5} 扩展运算符 扩展运算符用于取出参数对象的所有可遍历属性
Array 的扩展方法(★★) 扩展运算符(展开语法) 扩展运算符可以将数组或者对象转为用逗号分隔的参数序列 let ary = [1, 2, 3]; ...ary // 1, 2, 3 console.log (...ary); // 1 2 3,相当于下面的代码 console.log(1,2,3); 扩展运算符可以应用于合并数组 // 方法一 let ary1 = [1, 2, 3]; let ary2 = [3, 4, 5]; let ary3 = [...ary1, ...ary2]; // 方法二 ary1.push(...ary2); 将类数组或可遍历对象转换为真正的数组 let oDivs = document.getElementsByTagName('div'); oDivs = [...oDivs]; 构造函数方法:Array.from() 将伪数组或可遍历对象转换为真正的数组 "1": 2, "length": 2 } let newAry = Array.from(arrayLike, item => item *2)//[2,4] 注意:如果是对象
) * 将源对象的属性复制到目标对象上 * 直接操作__proto__属性 * let obj2 = {}; * obj2
ES6 的内置对象扩展 1.1 Array 的扩展方法(★★) 扩展运算符(展开语法) 扩展运算符可以将数组或者对象转为用逗号分隔的参数序列 let ary = [1, 2, 3]; ...ary 2, 3]; let ary2 = [3, 4, 5]; let ary3 = [...ary1, ...ary2]; // 方法二 ary1.push(...ary2); 将类数组或可遍历对象转换为真正的数组 "1": 2, "length": 2 } let newAry = Array.from(arrayLike, item => item *2)//[2,4] 注意:如果是对象 [1, 2, 3].includes(2) // true [1, 2, 3].includes(4) // false 1.2 String 的扩展方法 模板字符串(★★★) ES6新增的创建字符串的方式 方法表示将原字符串重复n次,返回一个新字符串 'x'.repeat(3) // "xxx" 'hello'.repeat(2) // "hellohello" 1.3 Set 数据结构(★★) ES6
Array 的扩展方法(★★) 扩展运算符(展开语法)... 扩展运算符可以将数组或者对象转为用逗号分隔的参数序列 let ary = [1, 2, 3]; ...ary // 1, 2, 3 此参数序列的逗号在console.log() 中被视为参数分隔符 "1": 2, "length": 2 } let newAry = Array.from(arrayLike, item => item *2)//[2,4] 注意:如果是对象 [1, 2, 3].includes(2) // true [1, 2, 3].includes(4) // false String 的扩展方法 模板字符串(★★★)`` ES6新增的创建字符串的方式 方法表示将原字符串重复n次,返回一个新字符串 'x'.repeat(3) // "xxx" 'hello'.repeat(2) // "hellohello" Set 数据结构(★★) ES6
JavaScript的世界,万物皆对象,ES6对对象有一些很大的升级。 : var obj = { a: 1 } ES6支持表达式作为对象的属性名: var a = 'test'; var obj = { [a]: 1 } console.log(obj);// {test: 1} 函数name属性在函数扩展说过了,对象的函数现在也有name属性。 前三个是ES5的,最后一个是ES6的。 可枚举属性就是为了让某些属性可以不被枚举,比如length、toString等,我们是希望不被循环出来的。ES6的Class原型的方法都是不可枚举的。 ...newObj } = o; console.log(newObj);//{z: 3} ES6对对象新增了很多方法: Object.is()跟严格相等(===)一样,多加了两个不同,+0不等于-0和
属性的简洁表示法 在ES6中 允许直接写入变量和函数,作为对象的属性和方法,使得代码的书写更为简洁。 const f = 'a' const b = {f} b // {f: 'a'} 等同于 const b = {f: f} 在ES6中允许在对象内直接写变量,这时候属性名为变量名,属性值就是变量值 为false的属性,只 拷贝对象自身的可枚举的属性 ES6中 所有class 的原型的方法都是不可枚举的 属性的遍历 ES6一共有5种方法可以遍历对象的属性。 5. super关键字 this的关键字总是指向函数所在的当前对象,ES6 又新增了另一个类似的关键字 super,指向当前对象的原型对象 注意:super关键字表示原型对象时,只能用在对象的方法之中, ES6入门系列 ES6入门之let、cont ES6入门之解构赋值 ES6入门之字符串的扩展 ES6入门之正则的扩展 ES6入门之数值的扩展
一、属性的简写 ES6中,当对象键名与对应值名相等的时候,可以进行简写 const baz = {foo:foo} // 等同于 const baz = {foo} 方法也能够进行简写 const ,ES6 又新增了另一个类似的关键字super,指向当前对象的原型对象 const proto = { foo: 'hello' }; const obj = { foo: 'world', // "hello" 四、扩展运算符的应用 在解构赋值中,未被读取的可遍历的属性,分配到指定的对象上面 let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }; let obj = { a: { b: 1 } }; let { ...x } = obj; obj.a.b = 2; // 修改obj里面a属性中键值 x.a.b // 2,影响到了结构出来x的值 对象的扩展运算符等同于使用 Object.assign()方法 五、属性的遍历 ES6 一共有 5 种方法可以遍历对象的属性。
扩展运算符(...)与对象一起能做什么? 大致可以分三种:对象的解构赋值、对象的拷贝、对象的合并; 1.对象的解构赋值 对象的解构赋值是把原对象里面的值浅拷贝到新的对象之中。 {y,z}} = o; x//1 y//undefined z//3 Object.creat(p1,p2)可以传两个参数,第一个对象是必须的,表示所创建对象的prototype;第二个对象是可选的 扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象中。 ; //a {x: 2, y: 3, z: 6} // b {x: 1, y: 2, q: 1} // aWithDefaults {x: 2, y: 3, q: 1, z: 6} (2)扩展运算符后边可以跟表达式
字符串扩展 str.includes(str):判断是否包含指定字符串,返回true\false str.startWidth(str):判断是否以指定字符开头 str.endWidth(str):判断是否以指定字符结尾 str.repeat(count):重复指定次数 数值扩展 Number.isFinite(i) :判断是否有无限大的数 Number.isNaN(i):判断是否NaN Number.isInteger (i):判断是否为整数 Number.parseInt(str):将字符串转换整数 Math.trunc(i):直接去除小数部分 数组扩展 Array.from(v):将伪数组对象或可遍历对象转换为真数组 return true})找出第一个满足条件返回true的元素 arr.findIndex(function(value,index,arr){return true})找出满足条件返回true元素小标 对象扩展 Object.is(0,-0))//false console.log(Object.is(NaN,NaN))//true Object.assign(target,source1,source2):将源对象的属性复制到目标对象
一、新增 flags 属性 ES6 为正则表达式新增了flags属性,会返回正则表达式的修饰符。 // ES5 的 source 属性 // 返回正则表达式的正文 /abc/ig.source // "abc" // ES6 的 flags 属性 // 返回正则表达式的修饰符 /abc/ig.flags 若 RegExp 构造函数第一个参数是一个正则对象,那么可以使用第二个参数指定修饰符。 加了u修饰符以后,ES6 将其识别其为一个字符,所以第一行代码结果为false。 关于点字符 点(.)字符在正则表达式中表示除了换行符以外的任意单个字符。 $/u.test(a)); // true 2、y 修饰符 ES6 为正则表达式新增了y修饰符 → “粘连”(sticky)修饰符。
var get_name = function(url, …keys) 除了第一个参数url外,剩余所有参数都会被放到keys数组中 函数只能有一个剩余参数,且必须放到最后 剩余参数不能在对象字面量的 setter属性中使用 延展运算符:var args = ['url', 123, 'st']; get_names(...args); new.target: 使用new创建一个对象时,会被赋值为新对象的构造器 ES6允许在代码块中定义函数,在严格模式中,块级函数只能在块级作用域中使用,而非严格模式中,块级函数会被提升到全局 箭头函数 没有this,super,arguments,new.target
0,本文适合人群和主要内容 ES6初学者,通过阅读本文可对ES6知识点有个大体的概念,强烈建议阅读阮一峰大大的ES6入门 老司机可以直接绕路。 本节主要总结ES6中对象的扩展,具体内容包括以下几个方面: 会介绍以下内容: 对象.png 1.ES6对象字面量 1.1简化对象属性定义 验证(1) 简化属性定义: // ES5 【补充】: ES6 一共有 5 种方法可以遍历对象的属性。 (1)for...in for...in循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)。 5.super关键字 ES5中,this关键字总是指向函数所在的当前对象。 ES6 中的关键字super,指向当前对象的原型对象。 中对象的一些扩展。
进行对字符串扩展,正则扩展,数值扩展,函数扩展,对象扩展,数组扩展。 console.log('1'); } if(str.includes('PD')) { console.log('2'); } } for-of遍历字符串 let str = 'abc'; // es6 Iterable对象转换成一个Array const obj = { 0: 1, 1: 2, 2: 4, length: 3 }; console.log(Array.from(obj)); index', index); console.log('arr',arr); return value % 2 === 0; }); console.log(res); 字符串,正则,数值,函数,对象 ,数组扩展。
一、函数参数的默认值 1、基本用法 ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面。 function f(y = x) { let x = 2; console.log(y); } f() // ReferenceError: x is not defined 二、rest 参数 ES6 ,而是一个类似数组的对象。 三、箭头函数 1、基本用法 ES6 允许使用“箭头”(=>)定义函数。 ,而非使用时所在的对象; (2)不可以当作构造函数,也就是说,不可以使用new命令,否则会报错; (3)不可以使用arguments对象,该对象在函数体内不存在,如果要用,可以用 rest 参数代替;